<!-- 
  配置任务弹窗
 -->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :close-on-click-modal="false"
    :title="$t('config_task')"
    :append-to-body="true"
    width="520px"
    :before-close="handleClose"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form ref="form" :model="formData" :rules="rules" label-width="160px">
        <el-form-item :label="$t('sys_equ_chanName')">
          <el-input disabled v-model="formData.camera_name" />
        </el-form-item>
        <!-- 工服颜色 -->
        <el-form-item
          v-if="is_work_cloth_color_show"
          :label="$t('work_cloth_color')"
        >
          <el-select v-model="formData.work_cloth_color" multiple>
            <el-option
              v-for="item in colorList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 闯入滞留时间s input-number -->
        <el-form-item
          v-if="is_invade_time_threshold_show"
          :label="$t('indoor.invade_time_threshold')"
        >
          <el-input-number v-model="formData.invade_time_threshold" :min="1" />
        </el-form-item>
        <!-- 检测触发关键点 select-->
        <el-form-item
          v-if="is_invade_body_part_show"
          :label="$t('invade_body_part')"
        >
          <el-select v-model="formData.invade_body_part">
            <el-option
              v-for="item in invade_body_part_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 检测模式 -->
        <el-form-item
          v-if="is_leave_with_oiltanker_show"
          :label="$t('detection_mode')"
        >
          <el-select v-model="formData.leave_with_oiltanker">
            <el-option
              v-for="item in leave_with_oiltanker_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 离岗时间 -->
        <el-form-item
          v-if="is_leave_time_threshold_show"
          :label="$t('indoor.leave_time_threshold')"
        >
          <el-input-number v-model="formData.leave_time_threshold" :min="1" />
        </el-form-item>
        <!-- 在岗人数 -->
        <el-form-item
          v-if="is_leave_num_threshold_show"
          :label="$t('indoor.leave_num_threshold')"
        >
          <el-input-number v-model="formData.leave_num_threshold" :min="1" />
        </el-form-item>
        <!-- 睡岗时间 -->
        <el-form-item
          v-if="is_doze_time_threshold_show"
          :label="$t('indoor.sleep_time_threshold')"
        >
          <el-input-number v-model="formData.doze_time_threshold" :min="1" />
        </el-form-item>
        <!-- 工帽颜色 -->
        <el-form-item v-if="is_work_cap_color_show" :label="$t('cap_color')">
          <el-select v-model="formData.work_cap_color" multiple>
            <el-option
              v-for="item in colorList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 占用时间阈值 -->
        <el-form-item
          v-if="is_fire_exit_time_threshold_show"
          :label="$t('occupancy_time_threshold')"
        >
          <el-input-number
            v-model="formData.fire_exit_time_threshold"
            :min="1"
          />
        </el-form-item>
        <!-- 人员离开时间 -->
        <el-form-item
          v-if="is_firesmoke_unattend_time_threshold_show"
          :label="$t('firesmoke_unattend_time_threshold')"
        >
          <el-input-number
            v-model="formData.firesmoke_unattend_time_threshold"
            :min="1"
          />
        </el-form-item>
        <!-- 最小识别尺寸 -->
        <el-form-item
          v-if="is_ratdsize_min_show"
          :label="$t('ratdsize_min')"
          prop="ratdsize_min"
        >
          <el-input class="pix-input" v-model="formData.ratdsize_min" />
          <i class="el-icon-close"></i>
          <el-input class="pix-input" v-model="formData.ratdsize_min" />
        </el-form-item>
        <!-- 最大识别尺寸 -->
        <el-form-item
          v-if="is_ratdsize_max_show"
          :label="$t('ratdsize_max')"
          prop="ratdsize_max"
        >
          <el-input class="pix-input" v-model="formData.ratdsize_max" />
          <i class="el-icon-close"></i>
          <el-input class="pix-input" v-model="formData.ratdsize_max" />
        </el-form-item>
        <!-- 设置检测时间 -->
        <el-form-item
          v-if="is_ratd_schedule_show"
          :label="$t('detection_time')"
        >
          <el-select v-model="formData.ratd_schedule1" class="pix-input">
            <el-option
              v-for="item in hourList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select v-model="formData.ratd_schedule2" class="pix-input">
            <el-option
              v-for="item in minuteList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          -
          <el-select v-model="formData.ratd_schedule3" class="pix-input">
            <el-option
              v-for="item in hourList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select v-model="formData.ratd_schedule4" class="pix-input">
            <el-option
              v-for="item in minuteList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 检测模式 -->
        <el-form-item
          v-if="is_fireExtinguisher_with_oiltanker_show"
          :label="$t('detection_mode')"
        >
          <el-select v-model="formData.fireExtinguisher_with_oiltanker">
            <el-option
              v-for="item in leave_with_oiltanker_list"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 报警触发时间 -->
        <el-form-item
          v-if="is_fireExtinguisher_time_threshold_show"
          :label="$t('fireExtinguisher_time_threshold')"
        >
          <el-input-number
            v-model="formData.fireExtinguisher_time_threshold"
            :min="1"
          />
        </el-form-item>
        <!-- 规定静电释放时间 -->
        <el-form-item
          v-if="is_static_line_time_threshold_show"
          :label="$t('electrostatic_discharge_time')"
        >
          <el-input-number
            v-model="formData.static_line_time_threshold"
            :min="1"
          />
        </el-form-item>

        <!-- 预警人数阈值 -->
        <el-form-item
          v-if="is_crowd_threshold_show"
          :label="$t('crowd_threshold')"
        >
          <el-input-number v-model="formData.crowd_threshold" :min="1" />
        </el-form-item>
        <!-- 围栏(边界)检测触发关键点 -->
        <el-form-item
          v-if="is_over_boundary_body_part_show"
          :label="$t('invade_body_part')"
        >
          <el-select v-model="formData.over_boundary_body_part">
            <el-option
              v-for="item in over_boundary_body_part_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 越线方向 -->
        <el-form-item
          v-if="is_over_boundary_direction_show"
          :label="$t('over_boundary_direction')"
        >
          <el-select v-model="formData.over_boundary_direction">
            <el-option
              v-for="item in over_boundary_direction_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 人体探出关键点 -->
        <el-form-item
          v-if="is_lean_out_line_body_part_show"
          :label="$t('lean_out_line_body_part')"
        >
          <el-select v-model="formData.lean_out_line_body_part">
            <el-option
              v-for="item in lean_out_line_body_part_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 检测区域关键点 -->
        <el-form-item
          v-if="is_lean_out_area_body_part_show"
          :label="$t('lean_out_area_body_part')"
        >
          <el-select v-model="formData.lean_out_area_body_part">
            <el-option
              v-for="item in lean_out_area_body_part_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 最小告警重复间隔 -->
        <el-form-item
          v-if="is_warn_time_show"
          :label="$t('indoor.warn_time')"
          :rules="warn_time_rule"
        >
          <el-input-number v-model="formData[setItem.warn_time]" :min="1" />
        </el-form-item>
        <RoiVideo
          v-if="setItem.roiType && _visible"
          ref="roiVideoRef"
          :drawType="setItem.roiType"
          :formData="formData"
          :status="formData.status"
          :arrowValue="arrowValue"
          @updateFormData="(data) => updateFormData(data, setItem)"
        />
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="cancel" @click="cancel">{{
        $t("common.cancel")
      }}</MyButton>
      <MyButton class="confirm" @click="confirm">{{
        $t("common.confirm")
      }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import { editCamera } from "./service";
import util from "@/utils";
import RoiVideo from "./RoiVideo";
export default {
  components: {
    RoiVideo,
  },
  name: "SetWarnDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    setItem: {
      type: Object,
      default: () => ({}),
    },
    row: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {},
      rules: {
        ratdsize_max: [
          {
            pattern: /^(8|[1-9]\d|1\d\d|2[0-3]\d|240)$/,
            message: this.$t("adv_warn", { min: 8, max: 240 }),
            trigger: "change",
          },
          {
            required: true,
            message: this.$t("equipment_nonull", {
              name: this.$t("ratdsize_max"),
            }),
          },
        ],
        ratdsize_min: [
          {
            pattern: /^(8|[1-9]\d|1\d\d|2[0-3]\d|240)$/,
            message: this.$t("adv_warn", { min: 8, max: 240 }),
            trigger: "change",
          },
          {
            required: true,
            message: this.$t("equipment_nonull", {
              name: this.$t("ratdsize_min"),
            }),
          },
        ],
      },
      hourList: [
        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
        20, 21, 22, 23, 24,
      ],
      minuteList: [
        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
        20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
        38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55,
        56, 57, 58, 59,
      ],
      // 工服颜色
      colorList: [
        { label: this.$t("bodyCode.black"), value: "black" },
        { label: this.$t("bodyCode.white"), value: "white" },
        { label: this.$t("bodyCode.gray"), value: "gray" },
        { label: this.$t("bodyCode.red"), value: "red" },
        { label: this.$t("bodyCode.yellow"), value: "yellow" },
        { label: this.$t("bodyCode.blue"), value: "blue" },
        { label: this.$t("bodyCode.green"), value: "green" },
        { label: this.$t("bodyCode.purple"), value: "purple" },
      ],
      // 检测触发关键点
      over_boundary_body_part_list: [
        { label: this.$t("invade_body_part1"), value: 1 },
        { label: this.$t("invade_body_part2"), value: 2 },
        { label: this.$t("invade_body_part3"), value: 3 },
        { label: this.$t("invade_body_part4"), value: 4 },
      ],
      invade_body_part_list: [
        { label: this.$t("invade_body_part1"), value: 1 },
        { label: this.$t("invade_body_part2"), value: 2 },
        { label: this.$t("invade_body_part3"), value: 3 },
        { label: this.$t("invade_body_part4"), value: 4 },
      ],
      leave_with_oiltanker_list: [
        { label: this.$t("normal_mode"), value: false },
        { label: this.$t("oiltanker_mode"), value: true },
      ],
      over_boundary_direction_list: [
        { label: this.$t("A_B"), value: 1 },
        { label: this.$t("B_A"), value: 2 },
        { label: this.$t("AB_both"), value: 3 },
      ],
      lean_out_line_body_part_list: [
        { label: this.$t("invade_body_part1"), value: 1 },
        { label: this.$t("invade_body_part2"), value: 2 },
        { label: this.$t("invade_body_part3"), value: 3 },
        { label: this.$t("invade_body_part4"), value: 4 },
        { label: this.$t("invade_body_part5"), value: 5 },
        { label: this.$t("invade_body_part6"), value: 6 },
      ],
      lean_out_area_body_part_list: [
        { label: this.$t("invade_body_part1"), value: 1 },
        { label: this.$t("invade_body_part2"), value: 2 },
        { label: this.$t("invade_body_part3"), value: 3 },
        { label: this.$t("invade_body_part4"), value: 4 },
        { label: this.$t("invade_body_part5"), value: 5 },
        { label: this.$t("invade_body_part6"), value: 6 },
      ],
      warn_time_rule: [
        {
          pattern:
            /^(?:[1-9]|[1-9][0-9]|[1-9][0-9]{2}|[12][0-9]{3}|3[0-5][0-9]{2}|3600)$/,
          message: this.$t("warn_time_tips"),
          trigger: "change",
        },
      ],
    };
  },
  computed: {
    // 画line是否要画箭头,取值是箭头方向
    arrowValue: {
      get() {
        return (
          this.is_over_boundary_direction_show &&
          this.formData.over_boundary_direction
        );
      },
    },
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    isROI() {
      return this.setItem.isROI;
    },
    is_warn_time_show() {
      return this.setItem.warn_time;
    },
    is_work_cloth_color_show() {
      return this.setItem.is_work_cloth_color_show;
    },
    is_leave_with_oiltanker_show() {
      return this.setItem.is_leave_with_oiltanker_show;
    },
    is_leave_time_threshold_show() {
      return this.setItem.is_leave_time_threshold_show;
    },
    is_leave_num_threshold_show() {
      return this.setItem.is_leave_num_threshold_show;
    },
    is_doze_time_threshold_show() {
      return this.setItem.is_doze_time_threshold_show;
    },
    is_crowd_threshold_show() {
      return this.setItem.is_crowd_threshold_show;
    },
    is_invade_time_threshold_show() {
      return this.setItem.is_invade_time_threshold_show;
    },
    is_invade_body_part_show() {
      return this.setItem.is_invade_body_part_show;
    },
    is_over_boundary_body_part_show() {
      return this.setItem.is_over_boundary_body_part_show;
    },
    is_over_boundary_direction_show() {
      return this.setItem.is_over_boundary_direction_show;
    },
    is_lean_out_line_body_part_show() {
      return this.setItem.is_lean_out_line_body_part_show;
    },
    is_lean_out_area_body_part_show() {
      return this.setItem.is_lean_out_area_body_part_show;
    },
    is_work_cap_color_show() {
      return this.setItem.is_work_cap_color_show;
    },
    is_fire_exit_time_threshold_show() {
      return this.setItem.is_fire_exit_time_threshold_show;
    },
    is_firesmoke_unattend_time_threshold_show() {
      return this.setItem.is_firesmoke_unattend_time_threshold_show;
    },
    is_ratdsize_min_show() {
      return this.setItem.is_ratdsize_min_show;
    },
    is_ratdsize_max_show() {
      return this.setItem.is_ratdsize_max_show;
    },
    is_ratd_schedule_show() {
      return this.setItem.is_ratd_schedule_show;
    },
    is_fireExtinguisher_time_threshold_show() {
      return this.setItem.is_fireExtinguisher_time_threshold_show;
    },
    is_static_line_time_threshold_show() {
      return this.setItem.is_static_line_time_threshold_show;
    },
    is_fireExtinguisher_with_oiltanker_show() {
      return this.setItem.is_fireExtinguisher_with_oiltanker_show;
    },
  },
  watch: {
    row: {
      handler(val) {
        this.$set(this, "formData", {
          ...val,
          over_boundary_direction: val.over_boundary_direction || 1,
          work_cloth_color:
            val.work_cloth_color && val.work_cloth_color.split(","),
          static_line_time_threshold:
            val.static_line_time_threshold &&
            Math.floor(val.static_line_time_threshold / 60),
          leave_time_threshold:
            val.leave_time_threshold &&
            Math.floor(val.leave_time_threshold / 60),
          fireExtinguisher_time_threshold:
            val.fireExtinguisher_time_threshold &&
            Math.floor(val.fireExtinguisher_time_threshold / 60),
        });
        // 回显绘制
        setTimeout(() => {
          if (!this.setItem.roiType) return;
          if (this.setItem.roiType.includes("line")) {
            this.$refs.roiVideoRef.lineData = val[this.setItem.roiLine]
              .split(",")
              .map((item) => {
                const [x, y] = item.split("*").map((i) => Number(i) / 4);
                return { x, y };
              });
            this.$refs.roiVideoRef.line_draw(true);
          }
          if (this.setItem.roiType.includes("polygon")) {
            this.$refs.roiVideoRef.polygonData = val[this.setItem.roiPolygon]
              .split(",")
              .map((item) => {
                const [x, y] = item.split("*").map((i) => Number(i) / 4);
                return { x, y };
              });
            this.$refs.roiVideoRef.polygon_draw(true);
          }
        }, 1000);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    async confirm() {
      if (
        (this.setItem.roiPolygon && !this.formData[this.setItem.roiPolygon]) ||
        (this.setItem.roiLine && !this.formData[this.setItem.roiLine])
      ) {
        return this.$message.warning(this.$t("roi_tips"));
      }
      const params = this.parseParams({ ...this.formData });
      const res = await editCamera(params);
      if (res.code == 0) {
        util.msg.success("edit_success");
        this._visible = false;
        this.$emit("refresh");
      }
    },
    updateFormData(data, setItem) {
      const drawType = setItem.roiType;
      if (drawType.includes("line")) {
        const res = data.line
          .reduce((pre, cur) => {
            pre.push(Math.round(cur.x * 4) + "*" + Math.round(cur.y * 4));
            return pre;
          }, [])
          .join(",");
        this.$set(this.formData, setItem.roiLine, res);
      }
      if (drawType.includes("polygon")) {
        const res = data.polygon
          .reduce((pre, cur) => {
            pre.push(Math.round(cur.x * 4) + "*" + Math.round(cur.y * 4));
            return pre;
          }, [])
          .join(",");
        this.$set(this.formData, setItem.roiPolygon, res);
      }
    },
    parseParams(params) {
      params = {
        ...params,
        work_cloth_color:
          params.work_cloth_color && params.work_cloth_color.join(","),
        static_line_time_threshold:
          params.static_line_time_threshold &&
          params.static_line_time_threshold * 60,
        leave_time_threshold:
          params.leave_time_threshold && params.leave_time_threshold * 60,
        fireExtinguisher_time_threshold:
          params.fireExtinguisher_time_threshold &&
          params.fireExtinguisher_time_threshold * 60,
        ratd_schedule: {
          exectime: [
            {
              end: params.ratd_schedule3 * 3600 + params.ratd_schedule4 * 60,
              start: params.ratd_schedule1 * 3600 + params.ratd_schedule2 * 60,
            },
          ],
        },
      };
      return params;
    },
    cancel() {
      this.formData = {};
      this._visible = false;
      // 这里需要清除之前未保存的绘制
      this.$refs.roiVideoRef.cancelLine(); // 还原线段
      this.$refs.roiVideoRef.cancelPolygon(); // 还原多边形
    },
    handleClose(done) {
      this.cancel();
      done();
    },
  },
};
</script>

<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
      .el-input-number--medium {
        width: 300px;
      }
      .el-input {
        width: 300px;
      }
      .sf-ipInput {
        width: 300px;
      }
      .sf-ipInput-item {
        .el-input {
          width: calc(100% - 14px);
        }
      }
      .pix-input {
        width: 60px;
        .el-input {
          width: 100%;
        }
      }
    }
  }
}
</style>
